<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" name="" id="ipt">
    <button onclick="sendFn()">发布</button>
    <ul>
        <!-- <li>
            <input type="checkbox" value="">
            <p></p>
            <button>删除</button>
        </li> -->
    </ul>
    <script>
        /*
            1-发布
                点击发布按钮的-时候，获取 输入框的值- 调用发布接口--重新加载列表
            2-列表
                调用列表接口--循环遍历--拼字字符串
            3-删除
                行内事件-- <button onclick="fn(1)">
                        实现一个全局函数fn --获取到接口需要的参数--调用 删除接口---重新加载列表
            4-修改
                修改完成状态  
                行内事件-- <button onclick="fn2(1,0)">
                        实现一个全局函数fn --获取到接口需要的参数--调用 修改接口---重新加载列表
        
        */

        let todosAPI = 'http://localhost:3000/todos'
        // 1-
        // 点击发布按钮的-时候，获取 输入框的值- 调用发布接口--重新加载列表
        function sendFn() {
            let ipt = document.querySelector("#ipt");
            let title = ipt.value;

            let xhr = new XMLHttpRequest()
            xhr.open('post', todosAPI);
            xhr.setRequestHeader('content-type', 'application/json');

            // 参数 转为字符数据
            let data = { title, completed: 0 }
            xhr.send(JSON.stringify(data))

            xhr.onload = function () {
                if (xhr.status == 201) {
                    let obj = JSON.parse(xhr.responseText);
                    console.log(obj);
                    // 发布成功--异步
                    loadList()

                }
            }
            // loadList()


        }



        // 2-列表
        // 调用列表接口--循环遍历--拼字字符串
        function loadList() {
            let xhr = new XMLHttpRequest()
            xhr.open('get', todosAPI);
            xhr.send()
            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText);
                    console.log(obj);
                    // 发布成功--异步
                    let ulStr = obj.reverse().map(v => ` <li>
                                    <input onchange="updateFn(${v.id},${v.completed})" type="checkbox" value="" ${v.completed == 1 ? 'checked' : ''}>
                                    <p>${v.title}</p>
                                    <button onclick="delFn(${v.id})">删除</button>
                                </li>`).join('');
                    document.querySelector('ul').innerHTML = ulStr;
                    ipt.value = ''

                }
            }
        }


        // 3-删除
        //         行内事件-- <button onclick="fn(1)">
        //                 实现一个全局函数fn --获取到接口需要的参数--调用 删除接口---重新加载列表

        function delFn(id) {
            let xhr = new XMLHttpRequest()
            xhr.open('delete', todosAPI + '/' + id)
            xhr.send();
            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText)
                    console.log(obj);
                    loadList()
                }
            }
        }

        /* 
        
                    4-修改
                修改完成状态  
                行内事件-- <button onclick="fn2(1,0)">
                        实现一个全局函数fn --获取到接口需要的参数--调用 修改接口---重新加载列表
        
        */
        function updateFn(id, oldValue) {
            // 根据原来的状态得到最新的
            let newValue = oldValue == 1 ? 0 : 1;



            let xhr = new XMLHttpRequest()
            xhr.open('PATCH', todosAPI + '/' + id);
            xhr.setRequestHeader('content-type', 'application/json');

            // 参数 转为字符数据
            let data = { completed: newValue }
            xhr.send(JSON.stringify(data))

            xhr.onload = function () {
                if (xhr.status == 200) {
                    let obj = JSON.parse(xhr.responseText);
                    console.log(obj);
                    // 发布成功--异步
                    loadList()

                }
            }

        }
        loadList()
    </script>

</body>

</html>